<template>
    <div class="rank">
        <div class="top">
            <span style="color: aliceblue;font-weight: 700;font-size: 20px;">实时游客统计</span>
            <div class="logo"></div>

        </div>


        <div class="charts" ref="charts">

        </div>
    </div>
</template>
<script setup name='rank'>
    import { ref, onMounted } from 'vue'
    //echarts插件引入
    import * as echarts from 'echarts'

    let people = ref('20008123人')
    //水球图的实例
    let charts = ref()
    onMounted(() => {
        let mycharts = echarts.init(charts.value)
        mycharts.setOption({
            grid: {
                left: 30,
                right: 0,
                bottom: 30,
                top: 30
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
            },
            series: [{
                type: 'bar',
                data: [120, 150, 130, 147, 119, 150, 102],
                showBackground: true,
                backgroundStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'black' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],

                        global: false // 缺省为 false
                    }

                },
                label: {
                    show: true,
                    position: 'inside'
                },
                itemStyle: {
                    color: function (data) {
                        let arr = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'skyblue']
                        return arr[data.dataIndex]
                    }
                }
            },
            {
            
                    type: 'line',
                    data: [120, 150, 130, 147, 119, 150, 102],
                smooth:true


            }
            ],

        })
    })
</script>
<style scoped lang='scss'>
    .rank {
        margin: 10px 0 20px 30px;
        position: relative;
        background: url('@/views/screen/images/dataScreen-main-lt.png') no-repeat;
        background-size: cover;

        .top {
            .logo {

                display: block;
                margin-top: 10px;
                width: 68px;
                height: 7px;
                background: url('@/views/screen/images/dataScreen-title.png') no-repeat;

            }


        }




        .charts {
            width: 100%;
            height: calc(100% - 30px);

        }
    }
</style>